<template>
  <view class="feedback-container">
    <div v-if="feedbackData.reversion_content" class="evaluation-item">
      <view class="evaluation-content">
        <view class="evaluation-header">
          <text class="evaluation-title">{{
            feedbackData.reversion_user
          }}</text>
          <text class="evaluation-date">{{ feedbackData.reversion_time }}</text>
        </view>
        <!-- <text
          v-for="(star, index) in feedbackData.score"
          :key="index"
          style="color: #ffb800"
          >★</text
        > -->
        <view class="evaluation-body">
          <text class="evaluation-text">{{
            feedbackData.reversion_content
          }}</text>
        </view>
        <view class="evaluation-body">
          <text class="evaluation-text">备注：{{
            feedbackData.reversion_remark
          }}</text>
        </view>
      </view>
    </div>

    <u-empty
      v-else
      mode="data"
      text="暂无反馈"
    />
    <!-- <view class="feedback-input">
      <textarea
        v-model="feedbackContent"
        class="feedback-textarea"
        placeholder="请输入您的反馈内容..."
        :maxlength="500"
      />
      <view class="word-count">{{ feedbackContent.length }}/500</view>
    </view>

    <view class="submit-section">
      <button
        class="submit-btn"
        @click="submitFeedback"
        :disabled="!feedbackContent.trim()"
      >
        提交反馈
      </button>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { submitData, EvaluationItem, detailData } from "@/api/feedBack";

const evaluationData = ref<EvaluationItem | null>(null);
const feedbackContent = ref("");
const feedbackData = ref({});

onLoad((options?: Record<string, string | undefined>) => {
  if (options?.eData) {
    try {
      evaluationData.value = JSON.parse(decodeURIComponent(options.eData));
      loadFeedBackData();
    } catch (e) {
      console.error("Failed to parse eData:", e);
      evaluationData.value = null;
    }
  }
});

const loadFeedBackData = async () => {
  try {
    const res = await detailData(evaluationData.value?.id,);
    if (res.code === 0 && res.data) {
      feedbackData.value = res.data;
    }
  } catch (error) {
    console.error("加载评价详情失败:", error);
  }
};

const submitFeedback = () => {
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: "请输入反馈内容",
      icon: "none",
    });
    return;
  }

  // 这里添加提交反馈的接口调用
  uni.showLoading({
    title: "提交中...",
  });

  let storedUserInfo = uni.getStorageSync("userInfo");

  submitData({
    id: evaluationData.value?.id,
    // pob_id: "",
    reversion_content: feedbackContent.value,
    reversion_user_id: storedUserInfo.F_UserId,
  })
    .then((res: any) => {
      if (res.success) {
        uni.showToast({
          title: "提交成功",
          icon: "success",
        });
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    })
    .catch((error) => {
      uni.showToast({
        title: "提交失败",
        icon: "error",
      });
    })
    .finally(() => {
      uni.hideLoading();
    });
};
</script>

<style lang="scss">
.feedback-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.evaluation-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .evaluation-content {
    .evaluation-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .evaluation-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .evaluation-date {
        font-size: 24rpx;
        color: #999;
      }
    }

    .evaluation-body {
      margin-top: 10px 0;

      .evaluation-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
      }
    }

    .evaluation-footer {
      display: flex;
      justify-content: flex-end;

      .evaluation-status {
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;

        &.status-pending {
          color: #ff6f61;
          background-color: rgba(255, 111, 97, 0.1);
        }

        &.status-done {
          color: #4cd964;
          background-color: rgba(76, 217, 100, 0.1);
        }
      }
    }
  }
}

.feedback-input {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .feedback-textarea {
    width: 100%;
    height: 300rpx;
    font-size: 28rpx;
    line-height: 1.5;
    padding: 20rpx;
    box-sizing: border-box;
    border: 2rpx solid #eee;
    border-radius: 8rpx;
  }

  .word-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

.submit-section {
  padding: 40rpx 20rpx;

  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #2979ff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    border: none;

    &:disabled {
      background-color: #ccc;
    }
  }
}
</style> 